<template>
  <div class="product">
    <product-param :title="product.name">
      <template v-slot:buy>
        <button class="btn" @click="buy">立即购买</button>
      </template>
    </product-param>

    <div class="container">
      <div class="item-bg">
        <h2>{{product.name}}</h2>
        <h3>{{product.subtitle}}</h3>
        <p>
          <a href="" id="">全球首款双频 GP</a>
          <span>|</span>
          <a href="" id="">骁龙845</a>
          <span>|</span>
          <a href="" id="">AI 变焦双摄</a>
          <span>|</span>
          <a href="" id="">红外人脸识别</a>
        </p>
        <div class="price">
          <span>￥<em>{{product.price}}</em></span>
        </div>
      </div>
      <div class="item-bg-2"></div>
      <div class="item-bg-3"></div>

      <div class="item-swiper">
        <swiper :options="swiperOption">
          <!-- slides -->
          <swiper-slide><img src="/imgs/product/gallery-2.png" alt=""></swiper-slide>
          <swiper-slide><img src="/imgs/product/gallery-3.png" alt=""></swiper-slide>
          <swiper-slide><img src="/imgs/product/gallery-4.png" alt=""></swiper-slide>
          <swiper-slide><img src="/imgs/product/gallery-5.jpg" alt=""></swiper-slide>
          <swiper-slide><img src="/imgs/product/gallery-6.jpg" alt=""></swiper-slide>
          <!-- Optional controls -->
          <div class="swiper-pagination"  slot="pagination"></div>
          <!-- <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
          <div class="swiper-scrollbar"   slot="scrollbar"></div> -->
        </swiper>
         <p class="desc">小米8 AI变焦双摄拍摄</p>
      </div>
      <div class="item-video">
        <h2>60帧超慢动作摄影<br/>慢慢回味每一瞬间的精彩</h2>
        <p>后置960帧电影般超慢动作视频，将眨眼间的美妙展现得淋漓尽致！<br/>更能AI 精准分析视频内容，15个场景智能匹配背景音效。</p>
        <!-- slide 动画 第一种实现方式 -->
        <!-- <div class="video-bg" @click="showVideo"></div>
        <div class="video-box">
          <div class="overlay" v-show="showSlide"></div>
          <div class="video" :class="{'slide':showSlide}">
            <span class="icon-close" @click="showVideo"></span>
            <video src="/imgs/product/video.mp4" muted autoplay controls="controls"></video>
          </div>
        </div> -->
        <!-- 第二种实现方式 -->
        <!-- <div class="video-bg" @click="showVideo2('down')"></div>
        <div class="video-box">
          <div class="overlay" v-show="slideClass=='slideDown'"></div>
          <div class="video" :class="slideClass">
            <span class="icon-close" @click="showVideo2('up')"></span>
            <video src="/imgs/product/video.mp4" muted autoplay controls="controls"></video>
          </div>
        </div> -->
        <!-- 改进版 -->
        <div class="video-bg" @click="showVideo3('down')"></div>
        <div class="video-box" v-show="slideClass">
          <div class="overlay"></div>
          <div class="video" :class="slideClass">
            <span class="icon-close" @click="showVideo3('up')"></span>
            <video src="/imgs/product/video.mp4" muted autoplay controls="controls"></video>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import ProductParam from '@/components/ProductParam'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
  name: 'Product',
  components: {
    ProductParam,
    Swiper,
    SwiperSlide
  },
  data () {
    return {
      product: {},
      showSlide: false,
      slideClass: '',
      top: '',
      swiperOption: {
        autoplay: true,
        slidesPerView: 3,
        spaceBetween: 20,
        freeMode: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      }
    }
  },
  mounted () {
    this.getProductInfo()
  },
  methods: {
    getProductInfo () {
      let id = this.$route.params.id
      this.axios.get(`/products/${id}`).then((res) => {
        this.product = res
      })
    },
    buy () {
      let id = this.$route.params.id
      this.$router.push(`/detail/${id}`)
    },
    showVideo () {
      this.showSlide = !this.showSlide
      // 弹出层打开后，禁止页面滚动
      if (this.showSlide) {
        this.top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        document.documentElement.style.overflow = 'hidden'
      } else {
        document.documentElement.style.overflow = 'scroll'
        window.parent.scrollTo(0, this.top)
      }
    },
    showVideo2 (val) {
      this.slideClass = val === 'down' ? 'slideDown' : 'slideUp'

      // 弹出层打开后，禁止页面滚动
      if (val === 'down') {
        this.top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        document.documentElement.style.overflow = 'hidden'
      } else {
        document.documentElement.style.overflow = 'scroll'
        window.parent.scrollTo(0, this.top)
      }
    },
    showVideo3 (val) {
      this.slideClass = val === 'down' ? 'slideDown' : 'slideUp'

      // 弹出层打开后，禁止页面滚动
      if (val === 'down') {
        this.top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        document.documentElement.style.overflow = 'hidden'
      } else {
        document.documentElement.style.overflow = 'scroll'
        window.parent.scrollTo(0, this.top)
        setTimeout(() => {
          this.slideClass = ''
        }, 600)
      }
    }
  }

}
</script>

<style lang="scss">
@import '@/assets/scss/mixin';
.product{
  button{
    margin-left:12px;
  }
  .container{
    .item-bg{
      background:url('/imgs/product/product-bg-1.png') no-repeat center;
      height: 718px;
      text-align: center;
      h2{
        font-size: 80px;
        padding-top: 55px;
      }
      h3{
        font-size:24px;
        letter-spacing: 10px;
      }
      p{
        margin-top:21px;
        margin-bottom:40px;
        a{
          font-size:16px;
          color:#333333;
        }
        span{
          margin:0 15px;
        }
      }
      .price{
        font-size:30px;
        color:#333333;
        em{
          font-style:normal;
          font-size:38px;
        }
      }
    }
    .item-bg-2{
      background:url(/imgs/product/product-bg-2.png) no-repeat center;
      height:480px;
      background-size:1226px 397px;
    }
    .item-bg-3{
      background:url(/imgs/product/product-bg-3.png) no-repeat center;
      height:638px;
      background-size:cover;
    }
    .item-swiper{
      margin:36px auto 52px;
      .desc{
        font-size:18px;
        color:#333333;
        text-align:center;
      }
      img{
        width:100%;
      }
    }
    .item-video{
      height:1044px;
      background-color:#070708;
      margin-bottom:76px;
      color:#FFFFFF;
      text-align:center;
      h2{
        font-size:60px;
        padding-top:82px;
        margin-bottom:47px;
      }
      p{
        font-size:24px;
        margin-bottom:58px;
      }
      .video-bg{
        background:url('/imgs/product/gallery-1.png') no-repeat center;
        background-size:cover;
        width:1226px;
        height:540px;
        margin:0 auto 120px;
        cursor:pointer;
      }
      .video-box{
        .overlay{
          @include position(fixed);
          background-color:#333333;
          opacity:.4;
          z-index:10;
        }
        @keyframes slideDown{
          from{
            top:-50%;
            opacity: 0;
          }
          to{
            top:50%;
            opacity: 1;
          }
        }
        @keyframes slideUp{
          from{
            top:50%;
            opacity: 1;
          }
          to{
            top:-50%;
            opacity: 0;
          }
        }
        .video{
          position:fixed;
          top:-50%;
          left:50%;
          transform: translate(-50%,-50%);
          z-index:10;
          width:1000px;
          height:536px;
          opacity:0;
          &.slide{
            top:50%;
            opacity:1;
          }
          &.slideDown{
            animation: slideDown 0.6s linear;
            top:50%;
            opacity: 1;
          }
          &.slideUp{
            animation: slideUp 0.6s linear;
          }
          .icon-close{
            position:absolute;
            top:20px;
            right:20px;
            @include bgImg(20px,20px,'/imgs/icon-close.png');
            cursor:pointer;
            z-index:11;
            &:hover{
              transform: scale(1.5);
              background-color: #FF6600;
              border-radius: 50%;
            }
          }
          video{
            width:100%;
            height:100%;
            object-fit:cover;
            outline:none;
          }
        }
      }
    }
  }
}
</style>
